<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

  <h:head>
    <title></title>
  </h:head>
  <body>
    <ui:composition template="/templates/template.xhtml">

      <ui:define name="windowTitle">#{msg['title.window']}</ui:define>

      <ui:define name="navigation">
        <ui:include src="/navigation.xhtml"/>
      </ui:define>

      <ui:define name="content">
        <h:panelGrid id="quranTranslations">

          <h:inputTextarea cols="116" rows="2" value="#{bean.combo.quranVerse}" 
                           class="quran textArea" dir="rtl" readonly="true" />

          <h:inputTextarea id="translations" cols="116" rows="20" value="#{bean.combo.combination}" 
                           class="trans textArea" dir="rtl" readonly="false" />

        </h:panelGrid>

        <hr/>

        <h:panelGrid columns="8">

          <h:outputText value="#{msg['label.chapter']}" styleClass="labelBold"/>
          <h:outputText value="#{msg['label.verse']}" styleClass="labelBold"/>
          <h:outputText value="#{msg['label.serial']}" styleClass="labelBold"/>
          <h:outputText value="#{msg['label.left']}" styleClass="labelBold"/>
          <h:outputText value=""/>
          <h:outputText value=""/>
          <h:outputText value=""/>
          <h:outputText value=""/>

          <h:inputText id="chapter" size="5" value="#{bean.chapter}" required="true"/>
          <h:inputText id="verse" size="5" value="#{bean.verse}" required="true"/>
          <h:inputText id="serial" size="5" value="#{bean.serial + 1}" readonly="true"/>
          <h:inputText id="left" size="5" value="#{bean.left}" readonly="true"/>

          <h:commandButton value="#{msg['button.go']}" styleClass="buttGen">
            <f:ajax event="click" 
                    listener="#{bean.lookupVerse}" 
                    execute="serial chapter verse"
                    render="quranTranslations serial chapter verse left"/>
          </h:commandButton>
          <h:commandButton value="#{msg['button.previousVerse']}" styleClass="buttGen">
            <f:ajax event="click" 
                    listener="#{bean.lookupPereviousVerse}" 
                    execute="serial chapter verse"
                    render="quranTranslations serial chapter verse left"/>
          </h:commandButton>

          <h:commandButton value="#{msg['button.nextVerse']}" styleClass="buttGen">
            <f:ajax event="click" 
                    listener="#{bean.lookupNextVerse}" 
                    execute="serial chapter verse"
                    render="quranTranslations serial chapter verse left"/>
          </h:commandButton>

          <h:commandButton value="#{msg['button.break']}" styleClass="buttGen">
            <f:ajax event="click" 
                    listener="#{bean.breakTranslations}" 
                    execute="translations"
                    render="brokenTranslations"/>
          </h:commandButton>



        </h:panelGrid>

        <hr/>

        <h:inputTextarea id="brokenTranslations" cols="116" rows="10" 
                         value="#{bean.subTranslationCombine}" 
                         class="trans textArea" dir="rtl" readonly="false" />

        <h:panelGrid columns="2">
          <h:commandButton value="#{msg['button.previousSubVerse']}" styleClass="buttGen">
            <f:ajax event="click" 
                    listener="#{bean.previousSubTranslations}" 
                    render="brokenTranslations"/>
          </h:commandButton>

          <h:commandButton value="#{msg['button.nextSubVerse']}" styleClass="buttGen">
            <f:ajax event="click" 
                    listener="#{bean.nextSubTranslations}" 
                    render="brokenTranslations"/>
          </h:commandButton>

        </h:panelGrid>

      </ui:define>
    </ui:composition>
  </body>
</html>
